<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
		<title>business</title>
		<link href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css" rel="stylesheet">
		<link rel="stylesheet" href="${request.contextPath}/css/inventory/product.css">
	</head>
	<body>
		<div id="app" v-show="showList">
			<input type="text" style="display: none" ref="contextPath" value="${request.contextPath}">
			<!--list begin-->
			<div class="list-warp">
				<!--tooltip begin-->
				<div class="tooltip-wrap">
					<el-row>
						<el-col :span='8'>
							<el-form size="medium" inline="true" :model="searchForm">
								<el-form-item>
									<el-input prefix-icon="el-icon-search" placeholder="请输入产品名称" v-model="searchForm.name"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button icon="el-icon-search" @click="searchClick">查询</el-button>
								</el-form-item>
							</el-form>
						</el-col>
						<el-col :span="8">
							<el-button-group>
								<el-button type="primary" icon="el-icon-plus" size="medium" @click="addForm">新增</el-button>
								<el-button type="danger" icon="el-icon-delete" size="medium" @click="deleteItems">删除</el-button>
							</el-button-group>
						</el-col>
					</el-row>
				</div>
				<!--tooltip end-->
				<!--content begin-->
				<div class="content-wrap">
					<el-table
					    :data="tableData"
					    border
					    style="width: 100%"
					    :height="tableHeight"
					    size="medium" 
					    ref="multipleTable"
						v-loading="loading"
						element-loading-text="拼命加载中"
					    @selection-change="handleSelectionChange">
					    <el-table-column
					      type="selection"
					      width="55">
					    </el-table-column>
					    <el-table-column
					      type="index"
					      width="55">
					    </el-table-column>
						<el-table-column
								prop="name"
								label="产品名称"
								width="150">
						</el-table-column>
						<el-table-column
								prop="filePath"
								label="缩略图">
							<template slot-scope="scope">
								<div v-if="scope.row.fileId!=null && scope.row.fileId!=''">
									<img style="width: 60px;height: 60px;" v-bind:src="contextPath +'/fileupload/' + scope.row.fileId">
								</div>
							</template>
						</el-table-column>
						<el-table-column
							prop="cost"
							label="成本(CNY)">
						</el-table-column>
						</el-table-column>
						<el-table-column
								prop="price"
								label="定价(USD)">
						</el-table-column>
						<el-table-column
							prop="profit"
							label="利润(%)">
						</el-table-column>
						<el-table-column
								prop="weight"
								label="重量(KG)">
						</el-table-column>
						<el-table-column
								prop="volumeWeight"
								label="体积重(KG)">
						</el-table-column>
						<el-table-column
								label="状态">
							<template slot-scope="scope">
								<template v-if="scope.row.status == '1'">
									<span style="color: #67C23A">在售</span>
								</template>
								<template v-if="scope.row.status == '2'">
									<span style="color: #909399">下架</span>
								</template>
							</template>
						</el-table-column>
					    <el-table-column label="操作" fixed="right" width="130">
					    	<template slot-scope="scope">
					    		<el-button
						          size="mini" icon="el-icon-edit"
						          @click="editItem(scope.row)"
						          ></el-button>
						        <el-button
						          size="mini"
						          type="danger"
						          icon="el-icon-delete" 
						          @click="deleteItem(scope.row.id)"
						          ></el-button>
					    	</template>
					    </el-table-column>
					  </el-table>
				</div>
				<!--content end-->
				<div class="page-wrap">
					<el-pagination 
						@size-change="handleSizeChange"
					    @current-change="handleCurrentChange"
					    :current-page="currentPage"
					    :page-sizes="[20, 30, 50, 100]"
					    :page-size="pageSize"
					    layout="total, sizes, prev, pager, next, jumper"
					    :total="total">
					</el-pagination>
				</div>
			</div>
			<!--list end-->
			<div class="dialog">
				<el-dialog :title="dialogTitle" :visible.sync="dialogTableVisible" modal="false" fullscreen="true" class="form-dialog">
				  <el-form ref="form"  status-icon :model="form" :rules="rules" label-width="150px" class="form">
					  <input type="text" style="display: none;" v-model="form.id">
					  <el-form-item label="产品名称" prop="name">
						  <el-input v-model="form.name"></el-input>
					  </el-form-item>
					  <el-form-item label="产品缩略图">
						  <el-upload
								  :action="fileUploadAction"
								  :show-file-list="false"
								  :on-success="handleAvatarSuccess"
								  :before-upload="beforeAvatarUpload"
								  :limit="1"
								  name="file">
							  <img v-if="imageUrl" :src="imageUrl" class="avatar">
							  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
							  <div slot="tip" class="el-upload__tip">只能上传jpg/jpeg/png文件，且不超过3M</div>
						  </el-upload>
					  </el-form-item>
					  <el-row>
						  <el-col :span="8">
							  <el-form-item label="长" prop="detail.length">
								  <el-input v-model="form.detail.length">
									  <template slot="append">CM</template>
								  </el-input>

							  </el-form-item>
						  </el-col>
						  <el-col :span="8">
							  <el-form-item label="宽" prop="detail.width">
								  <el-input v-model="form.detail.width"  step="0.1" type="number">
									  <template slot="append">CM</template>
								  </el-input>
							  </el-form-item>
						  </el-col>
						  <el-col :span="8">
							  <el-form-item label="高" prop="detail.height">
								  <el-input v-model="form.detail.height" step="0.1" type="number">
									  <template slot="append">CM</template>
								  </el-input>
							  </el-form-item>
						  </el-col>
					  </el-row>
					  <el-row>
						  <el-col :span="8">
							  <el-form-item label="重量" prop="weight">
								  <el-input v-model="form.weight" step="0.001" type="number">
									  <template slot="append">KG</template>
								  </el-input>
							  </el-form-item>
						  </el-col>
						  <el-col :span="8">
							  <el-form-item label="体积重">
								  <el-input v-model="volumeWeight" step="0.001" type="number" :disabled="true">
									  <template slot="append">KG</template>
								  </el-input>
							  </el-form-item>
						  </el-col>
						  <el-col :span="8">
							  <el-form-item label="颜色">
								  <el-input v-model="form.detail.color"></el-input>
							  </el-form-item>
						  </el-col>
					  </el-row>

					  <el-row>
						  <el-col :span="8">
							  <el-form-item label="成本" prop="cost">
								  <el-input v-model="form.cost">
									  <template slot="append">CNY</template>
								  </el-input>
							  </el-form-item>
						  </el-col>
						  <el-col :span="8">
							  <el-form-item label="定价" prop="price">
								  <el-input v-model="form.price">
									  <template slot="append">USD</template>
								  </el-input>
							  </el-form-item>
						  </el-col>
						  <el-col :span="8">
							  <el-form-item label="利润">
								  <el-input v-model="cprofit" :disabled="true">
									  <template slot="append">%</template>
								  </el-input>
							  </el-form-item>
						  </el-col>
					  </el-row>
					  <el-form-item label="供货商">
						  <template>
							  <el-transfer
									  filterable
									  filter-placeholder="请输入供货商名称"
									  v-model="form.suppliers"
									  :data="data2"
									  :titles="['供货商(未选)', '供货商(已选)']">
							  </el-transfer>
						  </template>
					  </el-form-item>
					  <el-form-item label="采购链接">
						  <el-input v-model="form.detail.purchaseLink"></el-input>
					  </el-form-item>
					  <el-form-item label="参考链接">
						  <el-input v-model="form.detail.consultLink"></el-input>
					  </el-form-item>
					  <el-form-item label="备注">
						  <el-input v-model="form.remark"></el-input>
					  </el-form-item>
					  <el-form-item label="状态">
						  <template>
							  <el-radio v-model="form.status" label="1">在售</el-radio>
							  <el-radio v-model="form.status" label="2">下架</el-radio>
						  </template>
					  </el-form-item>
					  <el-form-item>
						  <el-button type="primary" @click="onSubmit">保存</el-button>
						  <el-button @click="cancelForm">取消</el-button>
					  </el-form-item>
				  </el-form>
				</el-dialog>
			</div>
		</div>
		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
		<script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>
        <script src="https://cdn.bootcss.com/json5/0.5.1/json5.min.js"></script>
		<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
		<script src="${request.contextPath}/js/inventory/product.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
